<template lang="pug">
.cp-course-list
  el-dialog.cl-dialog(
    title="添加课程",
    :visible="visible",
    @close="closeDialog",
    width="60%")
    //- 查询
    el-form.cl-search(:inline="true")
      el-form-item
        el-input(
          v-model="name",
          placeholder="编号/名称/描述",
          style="width: 200px")
      el-form-item(label="课程分类 : ")
      el-form-item(label="课程分类", prop="courseType")
        el-select(v-model="courseType", style="width: 100px")
          el-option-group(
            v-for="group in courseTypeSelect"
            :key="group.name"
            :label="group.name")
            el-option(
              v-for="item in group.options"
              :key="item.value"
              :label="item.name"
              :value="item.value")
      el-form-item(label="授课方式 : ")
        el-select(v-model="courseForm", placeholder="请选择", style="width: 100px")
          el-option(label="全部", :value="null")
          el-option(
            v-for="(item, index) in courseFormSelect",
            :key="index", :label="item.name",
            :value="item.value")
      el-form-item(label="培训机构 : ")
        el-select(v-model="agency", placeholder="请选择", style="width: 100px")
          el-option(label="全部", :value="null")
          el-option(
            v-for="(item, index) in agencySelect",
            :key="index", :label="item.name",
            :value="item.value")
      el-form-item(label="创建人 : ")
        el-select(v-model="creator", placeholder="请选择", style="width: 100px")
          el-option(label="全部", :value="null")
          el-option(
            v-for="(item, index) in empSelect",
            :key="index", :label="item.name",
            :value="item.value")
      el-form-item
        el-button(type="primary", @click="search") 搜索
    //- 列表
    .cl-table
      el-table(
        ref="multipleTable"
        :data="dataList",
        @selection-change="onSelectionChange"
        @row-click="onRowClick"
        v-loading="loadingTable"
        height="398px"
        size="mini"
        border)
        el-table-column(type="selection")
        el-table-column(type="index", label="序号")
        el-table-column(show-overflow-tooltip, prop="code", label="代号")
        el-table-column(show-overflow-tooltip, prop="name", label="名称")
        el-table-column(show-overflow-tooltip, prop="version", label="版本")
        el-table-column(show-overflow-tooltip, label="课程分类")
          template(slot-scope="scope")
            span {{scope.row.courseType}}
        el-table-column(show-overflow-tooltip, label="授课方式")
          template(slot-scope="scope")
            span {{scope.row.courseForm | compare-list(courseFormSelect)}}
        el-table-column(show-overflow-tooltip, label="培训机构")
          template(slot-scope="scope")
            span {{scope.row.agency | compare-list(agencySelect)}}
        el-table-column(show-overflow-tooltip, label="创建人")
          template(slot-scope="scope")
            span {{scope.row.creator | compare-list(empSelect)}}
        el-table-column(show-overflow-tooltip, label="创建时间")
          template(slot-scope="scope")
            span {{ scope.row.creationTime | day-format }}
    //- 分页
    el-pagination.cl-pagination(
      layout="total, prev, pager, next, jumper",
      @current-change="changePage",
      :current-page.sync="pageNum",
      :page-size="pageSize",
      :background="true",
      :total="dataListTotal")
    div(slot="footer", style="text-align: center;")
      el-button(type="primary", plain, @click="closeDialog", v-text="'取消'")
      el-button(type="primary", style="margin-left: 40px;", @click="emitData", v-text="'确定'")
</template>

<script>
import { mapGetters } from 'vuex';
import ManApi from '@/api/manage';

export default {
  name: 'materiellist',
  props: {
    visible: Boolean,
  },
  data() {
    return {
      name: null,
      courseType: null,
      courseForm: null,
      agency: null,
      creator: null,
      // 列表
      dataList: [],
      dataListTotal: 1,
      pageNum: 1,
      pageSize: 10,
      loadingTable: true,
      // 选择的课程
      selectList: [],
      // 下拉框选项
      courseTypeSelect: [
        { name: '类别A', options: [{ value: 'a1', name: '类别A1' }, { value: 'a2', name: '类别A2' }] },
        {
          name: '类别B',
          options: [
            { value: 'b1', name: '类别B1' },
            { value: 'b2', name: '类别B2' },
            { value: 'b3', name: '类别B3' },
            { value: 'b4', name: '类别B4' }
          ]
        }
      ],
      courseFormSelect: [{ name: '线上自学', value: 0 }, { name: '线下培训', value: 1 }],
      agencySelect: [{ name: '内部培训', value: 0 }, { name: 'TUV', value: 1 }, { name: 'SGS', value: 2 }],
    };
  },
  computed: {
    ...mapGetters({
      empSelect: 'empSelect'
    })
  },
  watch: {
    storehouse (newData, oldData) {
      if (newData !== oldData) {
        this.loadingList();
      }
    }
  },
  methods: {
    closeDialog () {
      this.$emit('close');
    },
    // 整理参数
    filterParams () {
      const params = {
        name: this.name,
        courseType: this.courseType,
        courseForm: this.courseForm,
        agency: this.agency,
        creator: this.creator,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      };
      for (const key in params) {
        if (params[key] === null || params[key] === '' || params[key] === undefined) {
          delete params[key];
        }
      }
      return params;
    },
    // 获取列表数据
    loadingList () {
      const params = this.filterParams();
      this.loadingTable = true;
      ManApi.getMaterielOutList(params).then((result) => {
        this.dataList = result.records;
        this.dataListTotal = result.totalNum;
        this.loadingTable = false;
      }).catch((error) => {
        this.loadingTable = false;
        console.log(JSON.stringify(error));
      });
    },
    // 搜索
    search () {
      if (this.pageNum !== 1) {
        this.pageNum = 1;
      }
      this.loadingList();
    },
    // 分页
    changePage (pageNum) {
      this.pageNum = pageNum;
      this.loadingList();
    },
    // 选择改变时
    onSelectionChange (select) {
      this.selectList = select;
    },
    // 单行点击
    onRowClick (row) {
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.toggleRowSelection(row);
      }
    },
    // 确定选择
    emitData () {
      if (this.selectList.length) {
        this.$emit('submit', this.selectList);
        this.closeDialog();
      } else {
        this.$message({ type: 'info', message: '请选择课程' });
      }
    }
  },
  mounted () {
    // 取得表格数据
    this.loadingList();
  }
};
</script>

<style lang="sass">
.cp-course-list
  .cl-dialog
    &::-webkit-scrollbar
      display: none
    .el-dialog
      margin-top: 5vh!important
    .el-dialog__body
      padding: 16px
    .el-dialog__footer
      text-align: center
      padding-top: 0
      .el-button
        width: 80px
  .cl-search
    padding: 12px 0 12px 16px
    .el-form-item
      margin-right: 14px
      margin-bottom: 10px
    .el-form-item__label
      padding-right: 6px
  .cl-table
    margin-bottom: 12px
    .el-table
      th, td
        text-align: center
    table
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
      th.gutter
        display: table-cell!important
  .cl-pagination
    text-align: center
</style>
